<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Vertical Centering with Flexbox</title>  
<style>  
  .container {  
    display: flex;  
    flex-direction: column; /* 设置为列方向布局 */  
    justify-content: center; /* 垂直居中 */  
    height: 100vh; /* 使容器高度占满视口 */  
    border: 1px solid #000; /* 可视化边框 */ 
    background-color: black; 
  }  
  /*水平居中 
  flex-direction:row;
  align-items:center;
  */

  
  .item {  
    background-color: lightblue;  
    padding: 20px;  
  }  
</style>  
</head>  
<body>  
  
<div class="container">  
  <div class="item">我是垂直居中的子元素</div>  
</div>  
  
</body>  
</html>